<template>
    <div class="addressdiv">
        <form>
            <ul class="userInfoUl">
                <li class="userInfoLi">
                    <span>姓名</span>
                    <input type="search" placeholder="收货人姓名" required pattern="[\u4e00-\u9fa5]{1,}">
                </li>
                <li class="userInfoLi">
                    <span>电话</span>
                    <input type="search" placeholder="收货人手机号" pattern="^1[3-8][1-9]{9}$" />
                </li>
                <li class="userInfoLi city">
                    <span>地区</span>
                    <!-- <input type="search" placeholder="收货人姓名" /> -->
                    <van-cell is-link @click="showPopup">
                        <div class="edit">
                            <span>{{ flag ? userAddress : str }}</span><i class="iconfont icon-arrow-right-s-line"></i>
                        </div>
                    </van-cell>
                    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
                        <van-area @confirm="onConfirm" @cancel="show = false" :area-list="areaList"
                            :columns-placeholder="['请选择', '请选择', '请选择']" />
                    </van-popup>

                </li>
                <li class="userInfoLi">
                    <span>详细地址</span>
                    <input type="search" v-model="userHome" @input="test" placeholder="街道门牌、楼层房间号等信息" />
                    <!-- <datalist id="datalist">
                        <option value="黄龙万科中心">杭州市西湖区</option>
                        <option value="黄龙万科中心">杭州市西湖区</option>
                        <option value="黄龙万科中心">杭州市西湖区</option>
                        <option value="黄龙万科中心">杭州市西湖区</option>
                    </datalist> -->
                    <div class="addressList" :class="{ isShow: !userHome }">
                        <p><i class="iconfont icon-dingwei"></i>黄龙万科中心</p>
                        <p>杭州市西湖区</p>
                    </div>
                </li>
                <li class="userInfoLi">
                    <span>邮政编码</span>
                    <input type="search" placeholder="邮政编码" pattern="^[1-9]\d{5}(?!\d)$
                                                                                    " />

                </li>
                <li class="userInfoLi">
                    <p>设为默认收货地址</p>
                    <div class="container">
                        <input id="checkbox" name="checkbox" type="checkbox">
                        <label class="label" for="checkbox">
                        </label>

                    </div>


                </li>
                <li class="userInfoLi">
                    <input type="submit" value="提交" />
                </li>
                <li class="userInfoLi">
                    <input type="reset" value="删除" />
                </li>
            </ul>
        </form>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
export default {
    name: 'Address',

    data() {
        return {
            show: false,
            areaList,
            value: '',
            showArea: false,
            str: "选择省/市/区",
            userAddress: "",
            flag: false,
            userHome: "",
            timer: null,
            test: this.debounce(this.getHomeDebounce, 888)

        };
    },

    mounted() {

    },
    beforeUpdate() {

    },
    watch: {

    },

    methods: {
        // 节流
        debounce(fn, delay) {
            let timer1 = null
            return () => {
                if (timer1) {
                    clearTimeout(timer1)
                }
                timer1 = setTimeout(() => {
                    fn()
                    clearTimeout(timer1)
                }, delay);
            }

        },
        getHomeDebounce() {
            console.log(this.userHome);
        },
        // 
        showPopup() {
            this.show = true;
        },
        finish() {
            console.log(this.arr);
        },
        // useraddress
        onConfirm(values) {
            this.flag = true
            this.userAddress = ""
            values.forEach(item => {
                this.userAddress += item.name

            });
            this.show = false;
        },

    },
};
</script>

<style lang="less" scoped>
.isShow {
    display: none;
}

.addressdiv {
    width: 100%;

    // height: 23000px;
    .userInfoUl {
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(8, 1fr);
        grid-gap: 20px;
        margin-top: 10px;


        .userInfoLi {
            height: 200px;
            border-bottom: 1px solid #f3f5f6;
            padding: 0 60px;
            display: flex;
            align-items: center;
            position: relative;
            input[type = submit]{
                background-color: #ee0a24;
                width:90%;
                height: 180px;
                border-radius: 80px;
                color:white;
            }
            input[type = reset]{
                width:90%;
                text-align: center;
                height: 180px;
                border-radius: 80px;
                background-color: #fff;
                border: 1px solid #f3f5f6;
            }

            .addressList {
                position: absolute;
                width: 100%;
                height: 1800px;
                background-color: #f2f3f5;
                top: 100%;
                left: 0;
                z-index: 8;
                padding: 80px 60px;
            }

            span {
                color: #646566;
                width: 400px;
            }

            input {

                border: transparent;

                &::placeholder {
                    vertical-align: middle;
                    color: #cbd3e3;
                    font-size: 80px;

                }
            }
        }

        .city {

            .edit {
                width: 1200px;

                span {
                    color: #c8c9cc;
                }

                i {
                    float: right;
                    color: #a09799;
                }
            }
        }
    }
}

.container {
    position: absolute;
    height: 70px;
    top: 50%;
    left: 1460px;
    transform: translateY(-50%) scale(2);
}

.label {
    height: 60px;
    width: 120px;
    background-color: #ffffff;
    border-radius: 30px;
    -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
        inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
        inset 0 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
        inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
        inset 0 0 0 3px rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

.label:hover {
    -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
    transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
}

#checkbox:checked~.label:hover {
    -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
    transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
}

#checkbox {
    display: none;
}

#checkbox:checked~.label::before {
    left: 70px;
    background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.label::before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #000000;
    background-image: linear-gradient(130deg,
            #757272 10%,
            #ffffff 11%,
            #726f6f 62%);
    left: 10px;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
</style>